<template>
  <div class="login">
    <login-top middleTop="登入bilibili" cutover="注册页面" @cutoverClicks="cutoverClicks" />
    <login-text
      name="账号"
      label="账号"
      placeholder="请输入账号"
      type="text"
      :rule="rule"
      @inputChang="res=>{username = res}"
      style="margin:4.167vw 0px"
    />
    <login-text
      name="密码"
      label="密码"
      placeholder="请输入密码"
      type="password"
      :rule="rule"
      @inputChang="res=>{password = res}"
    />
    <login-btn btnText="登入" @registerSubmit="registerClick" />
  </div>
</template>

<script>
import LoginTop from "@/components/LoginTop";
import LoginText from "@/components/LoginText";
import LoginBtn from "@/components/LoginBtn";
export default {
  data() {
    return {
      username: "elongpaox",
      password: "123456",
      rule: "^.{6,9}$"
    };
  },
  components: { LoginTop, LoginText, LoginBtn },
  methods: {
    async registerClick() {
      const rules = new RegExp(this.rule);
      if (rules.test(this.username) && rules.test(this.password)) {
        const res = await this.$http.post("/login", {
          username: this.username,
          password: this.password
        });
        this.$toast({
          message: res.data.msg
        });

        if (res.data.code == 200) {
          localStorage.setItem("id", res.data.id);
          localStorage.setItem("token", res.data.token);
          this.$toast({
            message: "登入中..."
          });
          setTimeout(() => {
            this.$router.push("/index");
          }, 1000);
        }
      } else {
        this.$toast({
          message: "登入失败"
        });
        this.$notify({
          message: "请输入正确的账号用户名密码！",
          color: "red",
          background: "#ffe1e1"
        });
      }
    },
    cutoverClicks() {
      this.$router.push("/register");
    }
  },
  created(){
    this.$notify({
        message: "如果不想注册账号，请直接点击确认登入！",
        color: "white",
        background: "green"
     })
  }
};
</script>

<style>
</style>
